<template>
  <el-dialog
    :model-value="true"
    title="用户修改"
    width="80%"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form
      ref="myForm"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="formData.mobile" type="tel" maxlength="11" />
          </el-form-item>
        </el-col>

        <el-col :md="12" :sm="24">
          <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" maxlength="32" placeholder="不填写表示不修改"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="用户昵称" prop="nick_name">
            <el-input v-model="formData.nick_name" maxlength="32" />
          </el-form-item>
        </el-col>

        <el-col :md="12" :sm="24">
          <el-form-item label="状态" prop="status">
            <status-select v-model="formData.status" :empty="false"></status-select>
          </el-form-item>
        </el-col>

        <el-col :md="24">
          <el-form-item label="头像" prop="avatar">
            <image-upload v-model="formData.avatar" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="真实姓名" prop="real_name">
            <el-input v-model="formData.real_name" maxlength="32" />
          </el-form-item>
        </el-col>

        <el-col :md="12" :sm="24">
          <el-form-item label="学校" prop="school">
            <el-input v-model="formData.school" maxlength="32" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="年级" prop="grade">
            <el-date-picker
              v-model="formData.grade"
              type="year"
              format="YYYY"
              value-format="YYYY"
              placeholder="选择年份"
            />
          </el-form-item>
        </el-col>

        <el-col :md="12" :sm="24">
          <el-form-item label="专业" prop="professional">
            <el-input v-model="formData.professional" maxlength="32" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-button type="warning" @click="handleClose">取消</el-button>
        <el-button @click="handleClear(myForm)">清空</el-button>
        <el-button
          type="primary"
          @click.prevent="handleUpdate(myForm)"
          native-type="submit"
          >修改</el-button
        >
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits,defineProps,watch } from "vue";
import ImageUpload from "@/components/public/ImageUpload.vue";
import { FormRules, FormInstance } from "element-plus";
import request from "@/utils/request";
import {Md5} from "ts-md5";

// 记录增加的数据
let updateData = false;

// 定义事件触发器
const emits = defineEmits(["close"]);

const props = defineProps({
  // 行数据
  rowData: {
    type: Object,
    required: true,
  }
});

// 接收表单参数
const formData = reactive({
  mobile: "",
  password: "",
  nick_name: "",
  avatar: "",
  real_name: "",
  school: "",
  grade: "",
  professional: "",
});

const myForm = ref<FormInstance>();

const rules = reactive<FormRules>({
  mobile: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],
  password: [
    { min: 6, max: 32, message: "密码长度在6到32个字符", trigger: "blur" },
  ]
});

const handleClose = () => {
  emits("close", updateData);
  updateData = false;
};

const handleClear = (myForm: FormInstance) => {
  if (!myForm) {
    return;
  }
  myForm.resetFields();
};

const handleUpdate = (myForm: FormInstance) => {
  myForm.validate((valid) => {
    // 校验失败
    if (!valid) {
      return;
    }

    // 拷贝一个formData中的数据，避免把密码加密后密码框内容发生变化
    const data = {
      ...formData,
    };
    // 密码不填写表示不修改
    if (data.password) {
      // md5加密
      data.password = Md5.hashStr(data.password);
    }

    // 发起请求
    request({ 
      data: formData, 
      method: "POST", 
      url: "/user/update" }).then(res => {
      if (res.data.code > 0) {
        updateData = true;
        alert("修改成功");
        handleClose();
      } else {
        alert("修改失败");
      }
    }, () => {
      alert("修改失败");
    })
  });
}

// 侦听父传子的参数变化
watch(() => props.rowData,(newVal) => {
  if (!newVal) {
    return;
  }
  // 将newVal的值合并到formData中，然后组件便根据formData填充值
  Object.assign(formData,newVal);
},{immediate: true})
</script>

<style scoped lang="scss">
</style>